<template>
  <transition name="fade">
    <!-- 弹出层 -->
    <!-- type="shop-cart-list"  type会生成一个class cube-shop-cart-list -->
    <cube-popup
      v-show="visible"
      :mast-closable="true"
      :z-index="99"
      position="bottom"
      type="shop-cart-list"
      @mask-click="maskClick"
    >
      <transition name="move" @after-leave="onLeave">
        <div v-show="visible">
          <div class="list-header">
            <h2 class="title">购物车</h2>
            <span class="empty" @click="empty">清空</span>
          </div>
          <cube-scroll class="list-content" ref="ListContent">
            <ul>
              <li class="food" v-for="food in selectFoods" :key="food.name">
                <span class="name">{{ food.name }}</span>
                <div class="price">
                  <span>￥{{ food.price * food.count }}</span>
                </div>
                <div class="cart-control-wrapper">
                  <cart-control :food="food" @add="onAdd"></cart-control>
                </div>
              </li>
            </ul>
          </cube-scroll>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>

<script>
import cartControl from "../cart-control/cart-control.vue";

// 引入混合
import pupopMixin from "common/mixins/popup";
export default {
  mixins: [pupopMixin],
  name: "shop-cart-list",
  props: {
    selectFoods: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  // data() {
  //   return {
  //     visible: false
  //   };
  // },
  components: { cartControl },
  created() {
    // 监听 事件
    this.$on("show", () => {
      this.$nextTick(() => {
        this.$refs.ListContent.refresh();
      });
    });
  },
  methods: {
    // show() {
    //   this.visible = true;
    //   // 计算高度
    //   // 数据加载完之后刷新一下
    //   this.$nextTick(() => {
    //     this.$refs.ListContent.refresh();
    //   });
    // },
    // hide() {
    //   this.visible = false;
    //   // 派发事件
    //   this.$emit("hide");
    // },
    maskClick() {
      this.hide();
    },
    onLeave() {
      this.$emit("leave");
    },
    onAdd(target) {
      // target 接收到的目标
      this.$emit("add", target);
    },
    empty() {
      // 调用提示框
      this.$createDialog({
        type: "confirm",
        title: "清空购物车",
        content: "确认清空购物车么？",
        $events: {
          confirm: () => {
            this.selectFoods.forEach(food => {
              food.count = 0;
            });
            this.hide();
          }
        }
      }).show();
    }
  }
};
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable";

.cube-shop-cart-list
  bottom 48px;
  // （如模糊或颜色偏移）
  backdrop-filter blur(3px)
  // 淡入淡出效果
  &.fade-enter,&.fade-leave-active
    opacity: 0
  &.fade-enter-active,&.fade-leave-active
    transition all .3s ease-in-out
  // 列表的移动效果
  .move-enter,.move-leave-active
    transform translate3d(0,100%,0)
  .move-enter-active,.move-leave-active
    transition all .3s ease-in-out
  // 列表头部
  .list-header
    height 40px
    line-height 40px
    padding 0 18px
    background: $color-bg-ssss
    display: flex;
    justify-content space-between
    .title
      color $color-dark-grey
      font-size $fontsize-medium
    .empty
      color $color-blue
      font-size $fontsize-small

  .list-content
    padding 0 18px
    max-height 217px
    overflow: hidden;
    background $color-white
    // 商品列表
    .food
      display flex
      position: relative;
      padding 12px 0
      box-sizing border-box
      align-items center
      font-size $fontsize-medium
      border-bottom: 1px solid #d9d9d9;
      .name
        flex 1
        color $color-dark-grey
      .price
        padding 0 10px
        font-weight: 700;
        color: $color-red
</style>
